<template>
  <div id="player">
    <h2 class="title">黑云音乐</h2>
    <div class="search">
      <input type="text" v-model="inputValue" @keyup.enter="goSongs" />
      <!-- @keyup.enter="search" -->
      <button @click="goSongs">
        <span class="iconfont icon-search"></span>
      </button>
    </div>
    <div class="tab-wrapper">
      <!-- 对应的内容区域 -->
      <div class="tab-content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
//  <!-- 分析：
// 1：放入静态资源 ，清理默认代码
// 2：加入路由
// 3:加入首页html代码
// 4:完成首页轮播图组件
//   a:创建轮播图子组件
//      a1:安装 element-ui
//      a2:在main.js中导入注册element-ui
//      a3:复制官网的轮播图代码到轮播图组件
//      a4:安装axios，导入axios
//      a5:调用axios(created)
//      a6：渲染接口获取的图片数据
//   b:配制轮播图组件相应路由
// 5：歌曲列表组件
//    a:创建一个歌曲列表组件
//    b：配制歌曲列表组件相应路由
//    c:搜索歌曲时跳转到相应路由
//      c1:使用路由传值将input框的值传递到歌曲列表组件
//          传： this.$router.push('/songs?q=' + this.inputValue)
//          收：在songs页面接收input框的值  this.$route.query.q
//     c2:调用axios获取歌曲列表(导入axios调用axios)
//     c3:渲染歌曲列表
//  -->
export default {
  data() {
    return {
      inputValue: ""
    };
  },
  methods: {
    goSongs() {
      // q 参数 ：inputValue的值
      this.$router.push("/songs?q=" + this.inputValue);
    }
  }
};
</script>

<style>
/* <link rel="stylesheet" href="./css/index.css" />
  <link rel="stylesheet" href="./css/iconfont.css" /> */
@import url("./assets/css/index.css");
@import url("./assets/css/iconfont.css");
</style>